<template>
  <div class="container">
    <el-carousel style="height: 100%;">
      <el-carousel-item v-for="item of banner" :key="item.id">
        <nuxt-link
          :to="{
            name: 'goods-id',
            params: { id: item.id },
            query: { collectionName: 'banner' },
          }"
        >
          <img :src="item.imageUrl" class="img" />
          <div class="title_bg">
            <h3 class="title">{{ item.title }}</h3>
            <h4 class="sub_title">{{ item.id }}</h4>
          </div>
        </nuxt-link>
      </el-carousel-item>
    </el-carousel>

    <el-row
      class="home"
      :gutter="20"
      v-for="(item, index) in courseList"
      :key="index"
    >
      <el-col :span="6" v-for="course of item.data" :key="course.id">
        <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
          <nuxt-link
            :to="{
              name: 'goods-id',
              params: { id: course.id },
              query: { collectionName: 'home' },
            }"
          >
            <img :src="course.cover" alt="" class="image" />
          </nuxt-link>

          <div style="padding: 14px">
            <span>{{ course.title }}</span>
            <div class="bottom clearfix">
              <time class="time">喜欢：{{ course.viewCount }}</time>
              <el-button
                class="button"
                type="warning"
                icon="el-icon-star-off"
                circle
              ></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 显示引入辅助函数
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";

export default {
  // 1、异步获取服务器端的数据，返回给客户端进行渲染
  async asyncData({ $axios }) {
    // 读取静态资源
    let res = await $axios({ url: "/data/list.json" });

    // 读取动态数据，即服务器接口数据
    let res2 = await $axios({ url: "/eduservice/crm/banner/getAllBanner" });

    // 返回数据给客户端
    return {
      title: res.data.title,
      banner: res2.data.data.bannerList,
    };
  },
  // 2、异步获取服务器端的数据，交给vuex状态树进行管理
  async fetch({ $axios, store }) {
    let rets = await $axios({ url: "/eduservice/indexfront/index" });
    rets.data && store.commit("home/M_UPADTE_HOME", { data: rets.data });
  },

  // 3 methods中调用store中的函数
  methods: {
    getStoreData() {
      // 编程式访问Vuex
      // 发出actions请求
      //this.$store.dispatch('user/A_UPDATE_USER',{err: 0,token: 'user模块token',data:{title: "user模块的actions数据提交"}})
      // this.A_UPDATE_USER({err: 0,token: 'user模块token',msg: '登录成功',data:{title: "112222"}})
      // 直接发出mutations请求
      // this.$store.commit('user/M_UPDATE_USER',{err: 0,token: 'user模块token',msg: '登录成功',data:{title: "user模块的mutation数据"}})
      // this.M_UPDATE_USER({success:true,code: 20000,token: 'user模块token',message: '登录成功',data:{title: "456"}})
      // 获取更新之后的数据
      // this.msg = this.$store.state.user.data.title
      // 调用辅助函数mapGetters获取数据
      // this.test001 = this.G_UPDATE_USER()
    },
    // 使用对象展开运算符将此对象混入到外部对象中
    // 声明user模块下的actions
    // ...mapActions('user',['A_UPDATE_USER']),
    // ...mapMutations('user',['M_UPDATE_USER_INFO']),
    // ...mapGetters('user',['G_UPDATE_USER'])
  },
  // 计算属性
  computed: {
    // ...mapState({
    //   mapstateTitle: state => state.user.data
    // }),
    // ...mapState('user',['data']),
    //...mapState('home',['data']),
    // 如有相同变量名称可以使用对象的形式重新定义
    ...mapState({
      courseList: (state) => {
        let eduList = state.home.data.data.eduList;
        var count = 1;
        var goodsList = [];
        var goods_len = eduList.length;
        if (goods_len > 0) {
          //先计算总的有多少行,对应有多少个数组与之对应
          var rows = Math.ceil(goods_len / 4);
          //每行有4列
          for (var i = 0; i < rows; i++) {
            // 创建一个对象
            var rowObj = {
              rowIndex: i,
              data: [],
            };
            for (var j = 0; j < goods_len; j++) {
              var item = eduList[j];
              if (j >= 4 * (count - 1) && j < 4 * count) {
                rowObj.data.push(item); // 将符合要求的放入当前对象
              }
            }
            count++;
            goodsList.push(rowObj);
          }
        }
        return goodsList;
      },
    }),
  },
};
</script>
<style scoped>
.el-carousel__item .img {
  width: 100%;
  height: 100%;
}

.el-carousel__item .title_bg {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  height: 60px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: 999;
}
.home {
  margin-top: 20px;
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.image {
  width: 100%;
  display: block;
  height: 250px;
}
.button {
  padding: 0;
  float: right;
}
</style>
